<template>
  <van-nav-bar title="基本资料" left-text="" left-arrow @click-left="goBack" />
  <van-form @submit="onSubmit">
      <van-cell-group inset>

          <van-field v-model="LoginUser.nickname" name="nickname" label="昵称" placeholder="请输入昵称"
              :rules="[{ required: true, message: '请填写昵称' }]" />

          <van-field v-model="LoginUser.mobile" name="mobile" label="手机号码" placeholder="请输入手机号码"
          readonly  />

          <van-field v-model="LoginUser.email" name="email" label="邮箱" placeholder="请输入邮箱" />

          <van-field v-model="LoginUser.password" type="password" name="password" label="密码" placeholder="请输入密码" />

          <van-field name="gender" label="性别">
              <template #input>
                  <van-radio-group v-model="LoginUser.gender" direction="horizontal">
                      <van-radio name="0">保密</van-radio>
                      <van-radio name="1">男</van-radio>
                      <van-radio name="2">女</van-radio>
                  </van-radio-group>
              </template>
          </van-field>

          <!-- 地区 -->
          <van-field v-model="region" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区"
              @click="showArea = true" />
          <van-popup v-model:show="showArea" position="bottom">
              <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
          </van-popup>

          <!-- 头像 -->
          <van-field name="avatar" label="头像">
              <template #input>
                  <van-uploader v-model="avatar" :max-count="1"/>
              </template>
          </van-field>


      </van-cell-group>
      <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
              提交
          </van-button>
      </div>
  </van-form>

</template>

<script setup>
import {areaList} from '@vant/area-data'

const {proxy} = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))

const region=ref(LoginUser.region)
const showArea=ref(false)

// 头像
const avatar=ref([
  {url:LoginUser.avatar}
])
const goBack=()=>{
  proxy.$router.go(-1)
}

// 地区确认
const onConfirm=({selectedOptions})=>{
  showArea.value=false;
  // map方法遍历selectedOptions数组,从每个数组项中提取text的值   join以/拼接字符串
  region.value = selectedOptions.map((item) => item.text).join('-');
  console.log(selectedOptions);
  // 将三个值赋给省市区变量
  let [province, city, district] = selectedOptions
  if(province){
    LoginUser.province = province.value
  }
  if(city){
    LoginUser.city = city.value
  }
  if(district){
    LoginUser.district = district.value
  }
}

console.log(LoginUser)
const onSubmit =async (values) => {
  let data = {
        id: LoginUser.id,
        nickname: values.nickname,
        email: values.email,
        gender: values.gender,
        password: values.password,
        province: LoginUser.province,
        city: LoginUser.city,
        district: LoginUser.district
    }
    // 获取头像
    if(values.avatar.length>0 && values.avatar[0].file){
      data.avatar=values.avatar[0].file
    }
    let result = await Api.profile(data)
    if (result.code == 1) {
        //设置cookie
        proxy.$cookies.set("LoginUser", result.data);
        showSuccessToast({
            message: result.msg,
            onClose: function() {
              proxy.$router.push('/business/index')
            }
        });
    } else {
        showFailToast(result.msg);
    }
}
</script>